import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import UserList from './List'
import Modal from './Modal'

function User({location, dispatch, billUphold, loading}) {

  const { currentItem, modalVisible, modalType } = billUphold
  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    visible: modalVisible,
    maskClosable: false,
    // confirmLoading: loading.effects['user/update'],
    title: `${modalType === 'create' ? '新增账单信息' : '修改账单信息'}`,
    width: '80%',
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      console.log('确定回调》》》》》',data);
      dispatch({
        type: `billUphold/${modalType}`,
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'billUphold/hideModal',
      })
    },
  }

  function onDeleteItem(id) {
    dispatch({type: 'billUphold/delete', payload: {id}})
  }

  /**
   * 修改
   * @param  {[type]} item [description]
   * @return {[type]}      [description]
   */
  function onEditItem (item) {
    console.log(item);
    dispatch({
      type: 'billUphold/showModal',
      payload: {
        modalType: 'update',
        currentItem: item,
      },
    })
  }

  /**
   * 新增
   * @return {[type]} [description]
   */
  function onAdd () {
    dispatch({
      type: 'billUphold/showModal',
      payload: {
        modalType: 'create',
      },
    })
  }

  function onStatusItem(item) {
    dispatch({
      type: 'billUphold/updateStatus',
      payload: {
        billItem: item
      }
    })
  }

  function onDeleteBatch(ids) {
    dispatch({
      type: 'billUphold/deleteBatch',
      payload: { ids }
    })
  }

  function onSearch(values){
    dispatch({
      type: 'billUphold/search',
      payload: values
    })
  }

  const listProps = {
    billUphold,
    loading,
    location,
    onDeleteItem,
    onEditItem,
    onStatusItem,
    onDeleteBatch,
    onAdd,
    onSearch,
    dispatch
  }

  return (
    <div className='content-inner'>

      <UserList {...listProps}/>
      {modalVisible && <Modal {...modalProps} />}
    </div>
  );
}

User.propTypes = {
  billUphold: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func
};

function mapStateToProps({ billUphold }){
  return { billUphold }
}

export default connect(mapStateToProps)(User);
